<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>椭圆形旋转效果</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .grid-wrap {
      display: flex;
      /* flex-wrap: wrap; */
      width: 800px;
    }

    .grid-wrap div {
      width: 180px;
      height: 200px;
      background-color: aliceblue;
      /* flex-shrink: 1; */
    }

    .grid-wrap .order-test {
      flex-shrink: 1.1;
    }
  </style>
</head>

<body>
  <div class="grid-wrap">
    <div>1</div>
    <div class="order-test">2</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
  </div>
</body>

  <script src="https://cdn.jsdelivr.net/npm/web-streams-polyfill@2.0.2/dist/ponyfill.min.js"></script>

  <!--
    includes blob.stream() polyfill
    while Also making File constructor work in some browser that don't support it
    -->
  <script src="https://cdn.jsdelivr.net/gh/eligrey/Blob.js/Blob.js"></script>
  <script src="./StreamSaver.js"></script>
  <script src="zip-stream.js"></script>
  <script>
    $start.onclick = () => {
      const fileStream = streamSaver.createWriteStream('archive.zip')

      const readableZipStream = new ZIP({
        start(ctrl) {


          // ctrl.close()
        },
        async pull(ctrl) {
          // Gets executed everytime zip.js asks for more data
          // const url = 'https://app.yanfengseating.com/QMSstatic/Saqdc/347G-shiyanhuizong_202101041800100.zip'
          // const res = await fetch(url)
          // const stream = () => res.body
          // const name = '347G-实验汇总.zip'

          // ctrl.enqueue({ name, stream })

          const promise = el => {
            let name = el.name
            return new Promise(resolve => {
              console.log(el.url)
              fetch(el.url).then(resp => {
                if (resp.status == 200) {
                  return () => resp.body
                }
                return null
              }).then(stream => {
                resolve({ name: name, stream: stream })
              })
            })
          }
          let arr = [], files = []
          let res = await fetch("./yyzz.json").then(res => res.json()).then(data => {
            files = data
          })
          console.log(files)
          files.forEach(el => {
            console.log('el', )
            if (el.url.indexOf('https://6265') == -1 && el.name != "") {
              arr.push(promise(el))
            }
          })
          console.log(arr)
          await Promise.all(arr).then(res => {
            console.log(res)
            let nameMapList = []

            res.forEach((item, index) => {
              if (item.name == undefined) return; // 过滤
              let name = (item.name || index) + '.png'
              const stream = item.stream
              let nameList = nameMapList.map(nameMap => nameMap.name)
              //校验文件名称是否存在，如果存在则修改文件名称
              if (nameList.indexOf(name) == -1) {
                nameMapList.push({ name: name, cnt: 0 })
              } else {
                let nameItem = nameMapList.find(item => item.name == name)
                nameItem.cnt += 1
                console.log(nameItem)
                let fileName = name.substring(0, name.lastIndexOf('.'))
                let prefix = name.substr(name.lastIndexOf('.'))
                console.log(name)
                name = fileName + ("(" + nameItem.cnt + ")") + prefix
                console.log(name)
              }
              if (item.stream) {
                let file = { name, stream }
                console.log(file)
                ctrl.enqueue(file)
              }
            })
          })

          // if (done adding all files)
          ctrl.close()
        }
      })

      // more optimized
      if (window.WritableStream && readableZipStream.pipeTo) {
        return readableZipStream.pipeTo(fileStream).then(() => console.log('done writing'))
      }

      // less optimized
      const writer = fileStream.getWriter()
      const reader = readableZipStream.getReader()
      const pump = () => reader.read()
        .then(res => res.done ? writer.close() : writer.write(res.value).then(pump))

      pump()
    }
  </script>
</body>